<template>
	<div>
		<el-row :gutter="10">
			<el-col :span="24">
				<el-card shadow="never" class="card">
					<div id="charts_one" style="width:100%;min-height:80vh">
						<div class="btn-group" style="margin-bottom:11px;">
							<div>
								<el-button type="success" size="mini" icon="el-icon-plus" v-if="checkPermission('/admin/Cms.Catagory/add.html')" @click="add(ids)">添加</el-button>
								<el-button type="primary" size="mini" icon="el-icon-edit" v-if="checkPermission('/admin/Cms.Catagory/update.html')" @click="update(ids)">修改</el-button>
								<el-button type="danger" size="mini" icon="el-icon-delete" v-if="checkPermission('/admin/Cms.Catagory/delete.html')" @click="del(ids)">删除</el-button>
							</div>
							<table-tool :searchVisible.sync="searchVisible" :expand_status="true" :expand="expand" @toggleRowExpansion="toggleRowExpansion" :fieldList="fieldList" @refesh_list="index" :searchTool="true"></table-tool>
						</div>
						<el-table :row-class-name="rowClass" @selection-change="selection"  @row-click="handleRowClick" :tree-props="{children: 'children'}"  :default-expand-all="expand" row-key="class_id"  :header-cell-style="{ background: '#eef1f6', color: '#606266' }" v-loading="loading"  ref="multipleTable" border class="eltable" :data="list"  style="width: 100%">
							<el-table-column align="center" type="selection" width="42"></el-table-column>
							<el-table-column align="center" type = '' v-if="fieldList[0].checked" property="class_id" label="编号" show-overflow-tooltip width="70">
							</el-table-column>
							<el-table-column align="left"  v-if="fieldList[1].checked" property="class_name" label="栏目名称" show-overflow-tooltip width="">
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[2].checked" property="type" label="栏目属性" show-overflow-tooltip width="">
								<template slot-scope="scope">
									<el-tag type="primary" v-if="scope.row.type == '1'" size="mini" effect="dark">频道</el-tag>
									<el-tag type="warning" v-if="scope.row.type == '2'" size="mini" effect="dark">列表</el-tag>
								</template>
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[3].checked" property="status" label="状态" show-overflow-tooltip width="">
								<template slot-scope="scope">
									<el-switch @change="updateExt(scope.row,'status')" :active-value="1" :inactive-value="0" v-model="scope.row.status"></el-switch>
								</template>
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[4].checked" property="sortid" label="排序号" width="100">
								<template class="sort" slot-scope="scope">
									<el-input @blur.stop="updateExt(scope.row,'sortid')"  size="mini" placeholder="排序号" v-model="scope.row.sortid"></el-input>
								</template>
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[5].checked" property="menu.title" label="绑定模型" show-overflow-tooltip width="">
							</el-table-column>
							<el-table-column fixed="right" label="操作" align="center" width="250">
								<template slot-scope="scope">
									<el-button size="mini"  @click="add(scope.row)"><i class="el-icon-plus" />添加子栏目</el-button>
									<el-button size="mini" type="primary" @click="update(scope.row)"><i class="el-icon-edit" />修改</el-button>
									<el-button size="mini" type="danger" @click="del(scope.row)"><i class="el-icon-delete" />删除</el-button>
								</template>
							</el-table-column>
						</el-table>
						<Page :total="page_data.total" :page.sync="page_data.page" :limit.sync="page_data.limit" @pagination="index" />
					</div>
				</el-card>
			</el-col>
		</el-row>
		<!--添加-->
		<Add :info="addInfo" :list="list" :tplList="tplList" :moduleList="moduleList" :uploadConfigList="uploadConfigList" :show.sync="dialog.addDialogStatus" size="small" @refesh_list="index"></Add>
		<!--修改-->
		<Update :info="updateInfo" :list="list" :tplList="tplList" :moduleList="moduleList" :uploadConfigList="uploadConfigList" :show.sync="dialog.updateDialogStatus" size="small" @refesh_list="index"></Update>
	</div>
</template>
<script>
	import {
		index,
		updateExt,
		getInfo,
		del,
	} from '@/api/admin/cms/catagory'
	import Search from '@/components/common/Search.vue'
	import Page from '@/components/common/Page.vue'
	import TableTool from '@/components/common/TableTool.vue'
	import Add from '@/views/admin/cms/catagory/add.vue'
	import Update from '@/views/admin/cms/catagory/update.vue'
	import { confirm } from '@/utils/common'
	export default {
		name:'cms_catagory',
		components: {
			Search,
			Page,
			TableTool,
			Add,
			Update,
		},
		data(){
			return {
				dialog: {
					addDialogStatus : false,
					updateDialogStatus : false,
				},
				fieldList:[
					{lable:'编号',checked:true},
					{lable:'栏目名称',checked:true},
					{lable:'栏目属性',checked:true},
					{lable:'状态',checked:true},
					{lable:'排序号',checked:true},
					{lable:'绑定模型',checked:true},
				],
				ids: {},
				single:true,
				multiple:true,
				list: [],
				updateInfo:{},
				addInfo:{},
				tplList:[],
				moduleList:[],
				uploadConfigList:[],
				loading: false,
				page_data: {
					limit: 100,
					page: 1,
					total:20,
				},
				searchVisible:true,
				searchForm:[],
				searchData:{},
				expand:true,
			}
		},
		methods: {
			index(){
				let param = {limit:this.page_data.limit,page:this.page_data.page}
				if(this.searchData) param = Object.assign(param, this.searchData)
				this.loading = true
				index(param).then(res => {
					this.list = res.data.data
					this.page_data.total = res.data.total
					this.loading = false
				})
			},
			updateExt(row,field){
				updateExt({class_id:row.class_id,[field]:row[field]}).then(res => {
					this.$message({message: '操作成功', type: 'success'})
				})
			},
			add(row){
				let id = row.class_id ? row.class_id : 0
				getInfo({class_id:id,type:1}).then(res => {
					if(res.status == 200){
						this.dialog.addDialogStatus = true
						this.addInfo = res.data
						this.tplList = res.tplList
						this.moduleList = res.moduleList
						this.uploadConfigList = res.uploadConfigList
					}
				})
			},
			update(row){
				let id = row.class_id ? row.class_id : this.ids.join(',')
				getInfo({class_id:id,type:2}).then(res => {
					if(res.status == 200){
						this.dialog.updateDialogStatus = true
						this.updateInfo = res.data
						this.tplList = res.tplList
						this.moduleList = res.moduleList
						this.uploadConfigList = res.uploadConfigList
					}
				})
			},
			del(row){
				confirm({content:'确定要操作吗'}).then(() => {
					let ids = row.class_id ? row.class_id : this.ids.join(',')
					del({class_id:ids}).then(res => {
						this.$message({message: res.msg, type: 'success'})
						this.index()
					})
				}).catch(() => {})
			},
			selection(selection) {
				this.ids = selection.map(item => item.class_id)
				this.single = selection.length != 1
				this.multiple = !selection.length
			},
			handleRowClick(row, rowIndex){
				this.$refs.multipleTable.toggleRowSelection(row)
			},
			rowClass ({ row, rowIndex }) {
				for(let i=0;i<this.ids.length;i++) {
					if (row.id === this.ids[i]) {
						return 'rowLight'
					}
				}
			},
			toggleRowExpansion(){
				this.expand = !this.expand
				this.list.forEach(item=>{
					this.$refs.multipleTable.toggleRowExpansion(item,this.expand)
				})
			},
		},
		mounted(){
			this.index()
		}
	}
</script>
<style  lang="scss">
@import '@/assets/scss/common.scss'
</style>